<template>
    <ContentBox title="金融服务平台">
        <div class="content">
            <div>
                <div class="content_header">
                    <div>全</div>
                    <div>农</div>
                </div>
                <div class="content_show">
                    <div class="hl-orange">
                        <span class="digiter-number hl-orange digiterfontSize80">78</span>亿
                    </div>
                    <div class="hl-blue">
                        <span class="digiter-number hl-blue digiterfontSize80">78</span>亿
                    </div>
                </div>
                <div class="content_bottom">
                    授信金额
                </div>
            </div>
            <div>
                <div class="content_header">
                    <div>全</div>
                    <div>农</div>
                </div>
                <div class="content_show">
                    <div class="hl-orange">
                        <span class="digiter-number hl-orange digiterfontSize80">78</span>亿
                    </div>
                    <div class="hl-blue">
                        <span class="digiter-number hl-blue digiterfontSize80">78</span>亿
                    </div>
                </div>
                <div class="content_bottom">
                    累计放款金额
                </div>
            </div>
            <div>
                <div class="content_header">
                    <div>全</div>
                    <div>农</div>
                </div>
                <div class="content_show">
                    <div class="hl-orange">
                        <span class="digiter-number hl-orange digiterfontSize80">78</span>亿
                    </div>
                    <div class="hl-blue">
                        <span class="digiter-number hl-blue digiterfontSize80">78</span>亿
                    </div>
                </div>
                <div class="content_bottom">
                    贷款余额
                </div>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    export default {
        name: "Preview",
        components: {
            ContentBox
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        > div {
            flex: 1;
            margin: 0 20px;

            display: flex;
            flex-direction: column;
            > div {
                display: flex;
                justify-content: center;
                align-items: center;

                &.content_header {
                    height: 20%;
                    display: flex;

                    > div {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 40px;
                    }
                }
                &.content_show {
                    height: 38%;
                    display: flex;

                    > div {
                        flex: 1;
                        height: 100%;
                        font-size: 36px;
                        text-align: center;

                    }
                }

                &.content_bottom {
                    /*height: 20%;*/
                    flex: 1;
                    font-size: 40px;
                }
            }

        }
    }
</style>
